<template>
  <div>
    <div>
      <van-nav-bar title="登录" class="@nav-bar-icon-color" />
    </div>
    <div>
      <van-form @submit="onSubmit">
        <!--
         输入框 name属性 = "用户名"
         表单整体提交时，默认收集一个提交对象
         往后台发送的参数名就是name里的值
         {"mobile": '页面值'}
         label 表示左边描述文字
         placeholder：表单内容站位文字
         rules表单效验
         -->
        <van-field
          v-model="user.mobile"
          required
          name="mobile"
          label="手机号"
          placeholder="请填写11位手机号"
          :rules="[
            {
              required: true,
              message: '请填写手机号',
              pattern: /^1[3-9]\d{9}$/,
            },
          ]"
        />
        <!-- ^1[3-9]\d{9}$   ^$之间精确匹配 第一位为1 第二位匹配3-9之间 \d表示0-9 {9} 表示匹配9次-->
        <van-field
          v-model="user.code"
          required
          type="password"
          name="code"
          label="密码"
          placeholder="请填写密码"
          :rules="[
            { required: true, message: '请填写密码', pattern: /^\d{6}$/ },
          ]"
        />
        <!--
          round 默认为true 是否为圆形按钮
          block 是块级元素
          type 按钮类型 info 为蓝色
          native-type   button 原生 类型 submit 表示提交整个表单的按钮
         -->
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
          :loading="butState" :disabled="butState" loading-text="加载中ing..."
            >登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { loginApi } from '@/api'
import Notify from '@/ui/hint' // 函调用方式
import { setToken } from '@/utils/token'
import { setStorage } from '@/utils/storage'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  data () {
    return {
      user: {
        mobile: '', // 手机号
        code: '246810' // 密码
      },
      butState: false // 按钮状态
    }
  },
  methods: {
    // 提交 form 表单并向后台请求数据
    async onSubmit (values) {
      this.butState = true // 当用户点击提交时立即改变按钮状态
      console.log('submit', values)
      // console.log(this.user);  也能向后台发送form表单提价的数据对象

      try {
        const res = await loginApi(this.user)
        Notify({ type: 'success', message: '登录成功了' }) // 登陆成功提示用户
        // 登录成功后本地存储 token
        setToken(res.data.data.token)
        // 本地存储另外一个用来刷新的token
        setStorage('refresh_token', res.data.data.refresh_token)
        // 登录成功后跳转首页  -> 一定要最后写 要不然 跳转完成后会释放组件 下面代码将不会执行
        // this.$router.push() -> 会压栈(会产生历史记录，可以退回)   replace() -> 替换(不会产生历史记录)
        this.$router.replace({
          path: '/layout/home'
        })
      } catch (error) {
        Notify({ type: 'danger', message: '账号或密码不正确' }) // 登陆失败提示用户
      } finally {
        this.butState = false // 当登录流程过了立即将按钮状态修改为正常
      }
    }

  }
}
</script>

<style lang="less" scoped>
// .van-nav-bar {
//   background-color: #00aeec;
// }
// deep less 语法 [data-v-aeba673c] .van-nav-bar__title
// scoped 会将组件外部加 hash 值 当要修改内部样式时就要用 /deep/ 语法将 hash 加到类名前面 用后代选择器的方式寻找该组件
// /deep/ .van-nav-bar__title {
//   color: #fff;
// }
</style>
